<template>
    <!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"
        ref="modal_ref">
        <div class="modal-dialog" :class="size">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">{{ title }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"
                        ref="close_modal"></button>
                </div>
                <div class="modal-body">
                    <slot name="body"></slot>
                </div>
                <div class="modal-footer">
                    <button v-if="action_btns.includes('close')" type="button" class="btn btn-secondary"
                        data-bs-dismiss="modal">关闭</button>
                    <slot name="footer">
                    </slot>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { useTemplateRef, onMounted } from "vue"
import { Modal } from "bootstrap"

const modal_ref = useTemplateRef('modal_ref')
const close_modal = useTemplateRef('close_modal')
// const launch_modal = useTemplateRef('launch_modal')
let myModal = null
onMounted(() => {
    myModal = new Modal(modal_ref.value)
})

const { title = "无标题", action_btns = [], size = "" } = defineProps(['title', 'action_btns', 'size'])

function hide_modal() {
    close_modal.value.click()
    // myModal.hide()
}

function launch_modal() {
    myModal.show()
}

defineExpose({ hide_modal, launch_modal })
</script>